import React, { useEffect, useRef } from "react";
import { CountUp } from "countup.js";

const TotalData: React.FC<any> = ({ TotalDataValue }) => {
  let totalCountTarget = useRef<any>();
  let city1 = useRef<any>();
  let city2 = useRef<any>();
  let city3 = useRef<any>();
  let city4 = useRef<any>();
  let city5 = useRef<any>();
  let city6 = useRef<any>();

  // useEffect(()=>{
  //   console.log(TotalDataValue);

  //     },[TotalDataValue])
  useEffect(() => {
    new CountUp(totalCountTarget.current, TotalDataValue.total).start();
    new CountUp(city1.current, TotalDataValue.hb).start();
    new CountUp(city2.current, TotalDataValue.db).start();
    new CountUp(city3.current, TotalDataValue.hd).start();
    new CountUp(city4.current, TotalDataValue.zn).start();
    new CountUp(city5.current, TotalDataValue.xn).start();
    new CountUp(city6.current, TotalDataValue.xb).start();
  }, [TotalDataValue]);

  return (
    <div className="p-6">
      <div className="text-slate-300 text-center">
        数据总量：
        <span
          ref={totalCountTarget}
          className="text-gradient font-[Electronic] text-5xl ml-2 mr-2 font-bold"
        ></span>
        条记录
      </div>
      <div className="mt-3 flex flex-wrap">
        <div className="w-1/3 text-center text-slate-400 text-sm">
          华北：
          <span
            ref={city1}
            className="font-[Electronic] text-[#5DC5EF] text-2xl"
          ></span>
        </div>
        <div className="w-1/3 text-center text-slate-400 text-sm">
          东北：
          <span
            ref={city2}
            className="font-[Electronic] text-[#5DC5EF] text-2xl"
          ></span>
        </div>
        <div className="w-1/3 text-center text-slate-400 text-sm">
          华东：
          <span
            ref={city3}
            className="font-[Electronic] text-[#5DC5EF] text-2xl"
          ></span>
        </div>
        <div className="w-1/3 text-center text-slate-400 text-sm">
          中南：
          <span
            ref={city4}
            className="font-[Electronic] text-[#5DC5EF] text-2xl"
          ></span>
        </div>
        <div className="w-1/3 text-center text-slate-400 text-sm">
          西南：
          <span
            ref={city5}
            className="font-[Electronic] text-[#5DC5EF] text-2xl"
          ></span>
        </div>
        <div className="w-1/3 text-center text-slate-400 text-sm">
          西北：
          <span
            ref={city6}
            className="font-[Electronic] text-[#5DC5EF] text-2xl"
          ></span>
        </div>
      </div>
    </div>
  );
};
export default TotalData;
